<template>
    <div class="add_site">
        <div class="name siteForm">
            <span>收货人</span>
            <input type="text" placeholder="请输入姓名" v-model="compellation">
        </div>
        <div class="tel siteForm">
            <span>手机号码</span>
            <input type="tel" placeholder="请输入联系方式" v-model="cellPhone">
        </div>
        <div class="add siteForm" @click="opensite(true)">
            <span>收货地址</span>
            <p>{{addTit}}</p>
            <div class="dizhi">
                <!-- <input type="text" v-model="addTit" v-if="!isSite"> -->
                <x-address 
                    v-if="isSite"
                    :hide-district="false"
                    @on-hide="logHide" 
                    @on-show="logShow" 
                    :title="addTit"
                    :list="addressData" 
                    @on-shadow-change="onShadowChange"
                    placeholder="请选择" 
                    :show.sync="showAddress" 
                    :raw-value="true">
                </x-address>
            </div>
        </div>
        <div class="min_add siteForm">
            <span>详细地址</span>
            <input type="text" placeholder="请填写详细地址" v-model="addDetails">
        </div>
        <div class="btn">
            <button @click="conserve()">保存</button>
        </div>
    </div>
</template>

<script>
    import { XAddress, ChinaAddressV4Data, Group, } from 'vux'
    export default {
        name: 'addSite',
        components: {
            XAddress,
        },
        data() {
            return {
                addressData: ChinaAddressV4Data,
                addTit: '请选择出生地点',
                showAddress: true,
                isSite:false,
                siteId: '110000',
                provinceData: [],
                province: [],
                city: [],
                cityData: [],
                qvData: [],
                compellation: '',
                cellPhone: '',
                addDetails: '',
                ifinput:false,
                shengId: '',
                shiId: '',
                qvId: '',
                districts: [],
            }
        },
        methods: {
            onShadowChange (ids, names) {
                this.city = ids
                if(names[1] == '市辖区'){
                    this.addTit = names[0] + ' ' + names[0] + ' ' + names[2]
                } else {
                    this.addTit = names.join(' ')
                }
                let addArr = this.addTit.split(' ');
            },
            logHide (str) {
                // console.log("on-hide", str);
            },
            logShow (str) {
                // console.log("on-show", str);
            },
            opensite(bool) {
                this.isSite = bool
                if(!bool) {
                    this.birthVal = this.birthVal1
                }
                event.stopImmediatePropagation()
            },
            compile() {
                let queryId = this.$route.query.siteId
                if(queryId !== ''){
                    let params = {
                        userId: this.$store.state.userId,
                        addressId: queryId
                    }
                    this.$http.fetchGet('getUserAddressDetail', params).then(res => {
                        if(res.code == 200){
                            let data = res.data
                            this.compellation = data.userName
                            this.cellPhone = data.userPhone
                            this.addTit = data.areaName1 + ' ' + data.areaName2 + ' ' + data.areaName3
                            this.addDetails = data.address
                        } else {
                            this.$vux.toast.text(res.msg)
                        }
                    }, err => {
                        console.log(err)
                    })
                }
            },
            append() {
                let params = {
                    userName: this.compellation,
                    areaId1: this.city[0],
                    areaId2: this.city[1],
                    areaId3: this.city[2],
                    userPhone: this.cellPhone,
                    address: this.addDetails,
                    isDefault: 0,
                }
                this.$http.fetchGet('UserAddress', params).then(res => {
                    if(res.code == 200){
                        this.$vux.toast.text(res.msg)
                        this.$router.push({
                            path: '/my'
                        })
                    } else {
                        this.$vux.toast.text(res.msg)
                    }
                }, err => {
                    console.log(err)
                })
            },
            recompose(id) {
                let params = {
                    userId: this.$store.state.userId,
                    userName: this.compellation,
                    areaId1: this.city[0],
                    areaId2: this.city[1],
                    areaId3: this.city[2],
                    userPhone: this.cellPhone,
                    address: this.addDetails,
                    isDefault: 0,
                    addressId: id
                }
                this.$http.fetchGet('UserEditAddress', params).then(res => {
                    if(res.code == 200){
                        this.$vux.toast.text(res.msg)
                        this.$router.push({
                            path: '/my'
                        })
                    } else {
                        this.$vux.toast.text(res.msg)
                    }
                }, err => {
                    console.log(err)
                })
            },
            conserve() {
                let queryId = this.$route.query.siteId
                if(queryId == ''){
                    this.append()
                } else{
                    this.recompose(queryId)
                }
            }
        },
        mounted() {
            this.compile();
        }
    }
</script>

<style lang="less" scoped>
    .add_site{
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        background: #f2f2f2;
        .siteForm{
            width: 100%;
            .h(88);
            background: #fff;
            border-bottom: 1px solid #f2f2f2;
            .padd(0, 20);
            .lh(88);
            box-sizing: border-box;
            display: flex;
            span{
                .w(140);
                display: inline-block;
            }
            input{
                flex: 1;
                border: none;
                color: #666;
                &:focus{
                    outline:none;
                }
                &::-webkit-input-placeholder{
                    color: #666;
                }
            }
        }
        .add{
            position: relative;
            p{
                flex: 1;
                color: #666;
            }
            .dizhi{
                position: absolute;
                top: 0;
                left: 83px;
                overflow: hidden;
                opacity: 0;
                .h(88);
            }
        }
        .btn{
            width: 100%;
            .padd(0, 20);
            box-sizing: border-box;
            position: absolute;
            bottom: 45px;
            left: 0;
            button{
                width: 100%;
                .h(88);
                border: none;
                border-radius: 5px;
                color: #fff;
                background: #189BEB;
            }
        }
    }
</style>
